本篇大綱：

1. 為何選此主題
2. 為何不使用框架
3. 這三十天要講的大綱
4. Github 程式碼與 Github Page

為何會選 D3.js 這個主題

磨了好久終於決定要開賽了(其實是再不開就不用開了)！輕鬆的第一天開賽感言，就先來講講我為什麼會選這個主題吧！

之前在轉職前端工程師的過程中，就蠻常遇到需要繪製圖表的需求，也蠻常聽到不少人想學繪製圖表的工具。我覺得最主要的原因有幾點：

1. 圖表能將繁雜的數據視覺化，讓使用者能簡單地獲得想要的資訊
2. 炫砲的圖表更能吸引使用者目光，順便展現一下工程師有多厲害

為了因應這些需求，市面上出現很多繪製圖表的JS函式庫，例如：D3.js、C3.js、charts.js等等，其中自由度最大、同時也最難學的便是 D3.js。我自己是由於公司的專案需要一些客製化的功能，在試過幾種不同的圖表函式庫後，決定使用 D3.js 這個自由度比較大的圖表函式庫製作。而在學習 D3.js 的過程中，我發現它真的是個強大又有趣的工具，不僅僅具備高度自由，能客製化各種需求讓圖表跟使用者互動，甚至能結合 three.js 等等函式庫做出酷炫的3D的圖表。

但也因為 D3.js 版本更新快速（作者太勤勞是想逼死誰）、擁有許多 API 等等因素，讓它的學習門檻相較其他函式庫來得更高。我自己學習時遇到的困難點是：

1. D3.js 的官網不太好懂：官網上其實只是條列出各種 API 跟它的使用目的，而作者創辦的Observable網站也比較偏向讓大家展示製作的圖表跟程式碼，實際的解釋跟教學較少
2. 雖然已經有很多大大們寫了各種 D3.js 的教學文，但因為 D3.js 版本更新很快，常常遇到版本不同造成程式碼跑不動等等問題
3. 製作一些客製化功能時，相關的教學比較少，只能零散地在不同文章、教學影片中找線索

我覺得我遇到的這些困擾，一定也曾是其他學習 D3.js 的人遇過的。因此，為了幫助未來想學習 D3.js 的人，同時也給自己一個挑戰，我決定參加這次的鐵人賽，並在三十天內從零開始解釋D3.js的原理、繪圖方式、客製化功能製作，以及從基礎到進階的圖表繪製。希望看完這三十天的人，能一步步製作出自己想要的圖表！廢話不多說，現在就跟我一起進入D3的世界吧！

為何不使用框架

這系列我將用原生的 JS 與 d3.js 自己的方法去繪製圖表。可能有些人會問：為什麼不搭配Angular、React、 Vue 之類的框架使用呢？原因有三：

1. 已經有不少人寫過搭配框架的用法了
2. 我認為只要充分了解 D3.js 的繪製圖表原理、知道它怎麼去處理資料跟 DOM 元素，以及各種 API 的運用，之後再去搭配框架使用都能很快上手
3. 鐵人賽的篇幅有限，我希望能在一個月內讓大家都能充分了解D3.js

綜合上述幾點原因，因此這次就決定就先不搭配框架撰寫了～

本系列大綱

開始閱讀這篇鐵人賽之前，先來看看我這次預計要講的內容大綱吧～初接觸 D3 的人可以參考這份大綱，知道自己能學到什麼；已經掌握 D3 的人則可以按照自己想了解的功能，跳到相對應的章節～

大綱如下：

Day1：前言：三十天成為 d3.js 好手
Day2：D3 基礎介紹
Day3：開始D3.js 前，先認識SVG
Day4：D3.js 選擇器 Selection
Day5：D3.js 資料綁定 Data Binding：data() vs datum()
Day6：D3.js 資料綁定 Data Binding：enter、update、exit
Day7：D3.js 不同格式檔資料匯入的 API
Day8：D3.js 資料整理的 API 們 ⇒ Array、Time Format、number Format、Random
Day9：D3.js 繪製形狀的 Helper Functions
Day10：D3.js 動畫 Transition
Day11：D3.js 互動事件 ⇒ 滑鼠事件 Mouse Event
Day12：D3.js 小工具 Tooptips
Day13：D3.js 拖曳 Drag
Day14：D3.js 原力 Force
Day15：D3.js 縮放 Zoom
Day16：D3.js 選取區間 Brush
Day17：D3.js 比例尺 Scale()
Day18：D3.js 軸線與刻度 Axis() & Ticks()
Day19：D3.js 讓圖表RWD起來！
Day20 ～ Day26：D3.js 基礎圖表與互動 ⇒ 圓餅圖、散點圖、長條圖、複數長條圖、堆積長條圖、折線圖 等等
Day27 ～ Day30：D3.js 進階圖表與互動 ⇒ 氣泡圖、甜甜圈圖、合併圖表、文字雲、地圖等等

本系列主要分成兩部分：

1. 前二十天會一一講解 D3.js 的重要概念，了解該如何查找官方文件、怎麼使用不同的 API
2. 之後的十天則是實際運用這些觀念與API去繪製圖表
   • 前五天講基礎的、簡單的、你一定看過的圖表
   • 後五天則是進階講解難度較高、較複雜的圖表

這樣一系列講解＋實際演練下來，三十天後大家絕對能徹底掌握 D3！

Github Page 圖表與 Github 程式碼

除了鐵人賽的文章外，我也將此系列製作的程式碼與圖表放上 Github 跟 Github Page上，讓想看程式碼或直接看圖表互動方式的人，能更方便的瀏覽。需要的人請自行取用～